<template>
  <div class="subjects-container">
    <!-- 学科管理 -->

    <!-- 卡片区域 -->
    <el-card class="subjectCard" shadow="never">
      <el-form :inline="true">
        <el-row type="flex">
          <el-form-item label="学科名称">
            <el-input v-model="queryInfo.subjectName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="clearForm">清除</el-button>
            <el-button type="primary" @click="loadSubjectsList">搜索</el-button>
          </el-form-item>
          <el-button
            class="addSubjectBtn"
            type="success"
            icon="el-icon-edit"
            @click="addDialogVisible = true"
            >添加学科</el-button
          >
        </el-row>
      </el-form>

      <!-- 数据总计 -->
      <el-alert type="info" :closable="false">
        <i class="el-icon-info"></i>
        <span class="title">数据一共 {{ total }} 条</span>
      </el-alert>
      <!-- /数据总计 -->

      <!-- 表格区域 -->
      <el-table style="width: 100%" :data="subjectsList">
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="subjectName" label="学科名称" width="80">
        </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="160">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column
          prop="isFrontDisplay"
          label="前台是否显示"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.isFrontDisplay === 0 ? '否' : '是' }}
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="
                $router.push({
                  name: 'subjects-directorys',
                  query: { id: scope.row.id }
                })
              "
              >学科分类</el-button
            >
            <el-button type="text" @click="goTagsBtn(scope.row.id)"
              >学科标签</el-button
            >
            <el-button type="text" @click="editSubjects(scope.row)">
              修改
            </el-button>
            <el-button type="text" @click="removeById(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- /表格区域 -->

      <!-- 分页区域 -->
      <page-tool
        @pageSizeChange="onPageSizeChange"
        @pageChange="onPageChange"
        :current-page="queryInfo.page"
        :total="total"
        :page-size="queryInfo.pagesize"
      >
      </page-tool>
      <!-- /分页区域 -->
    </el-card>
    <!-- /卡片区域 -->

    <!-- 修改对话框 -->
    <subject-edit
      @edit-subject="editSubject"
      :editForm="editForm"
      :editFormRules="editFormRules"
      :editDialogVisible="editDialogVisible"
    >
    </subject-edit>
    <!-- /修改对话框 -->

    <!-- 添加对话框 -->
    <subject-add
      @add-subject="addSubject"
      :addForm="addForm"
      :addFormRules="addFormRules"
      :addDialogVisible="addDialogVisible"
    >
    </subject-add>
  </div>
</template>

<script>
import {
  getSubjectsList,
  deleteSubjectsById,
  editSubjectsName,
  addSubjects
} from '@/api/hmmm/subjects'
import PageTool from '@/module-manage/components/page-tool'
import SubjectAdd from '@/module-hmmm/components/subjects-add'
import SubjectEdit from '@/module-hmmm/components/subjects-edit'

export default {
  name: 'subjects-container',
  data() {
    return {
      queryInfo: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      total: 0,
      subjectsList: [], // 学科数组
      editDialogVisible: false, // 修改对话框默认状态
      editForm: {
        subjectName: '',
        isFrontDisplay: '',
        id: ''
      },
      editFormRules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      },
      addForm: {
        subjectName: ''
      },
      addFormRules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      },
      addDialogVisible: false
    }
  },
  components: {
    PageTool,
    SubjectAdd,
    SubjectEdit
  },
  created() {
    this.loadSubjectsList()
  },
  methods: {
    goTagsBtn(id) {
      this.$router.push({ name: 'subjects-tags', query: { id } })
    },
    // 获取数据
    async loadSubjectsList() {
      try {
        const { data } = await getSubjectsList(this.queryInfo)
        // console.log(data)
        this.subjectsList = data.items
        this.total = data.counts
        // console.log(this.subjectsList)
      } catch (err) {
        this.$message('获取数据失败!')
      }
    },

    // 监听关闭表单事件表单
    editDialogClose() {
      this.$refs.editFormRef.resetFields()
    },
    // 点击按钮修改学科
    async editSubjects(data) {
      this.editForm.id = data.id
      this.editForm.subjectName = data.subjectName
      this.editForm.isFrontDisplay = data.isFrontDisplay
      // console.log(data.isFrontDisplay)
      this.editDialogVisible = true
    },

    async editSubject() {
      // 发起请求
      try {
        const { data } = await editSubjectsName(this.editForm)
        this.$message.success('修改学科数据成功!')
      } catch (err) {
        this.$message('修改学科数据失败!')
      }
      this.loadSubjectsList()
      this.editDialogVisible = false
    },

    addDialogClose() {
      this.$refs.addFormRef.resetFields()
    },

    // 点击按钮添加学科
    async addSubject() {
      try {
        const { data } = await addSubjects(this.addForm)
        // console.log(data, '------------------')
        this.$message.success('添加学科数据成功!')
      } catch (err) {
        this.$message('添加学科数据失败!')
      }
      this.loadSubjectsList()
      this.addDialogVisible = false
    },

    // 删除确认提示框弹出
    async removeById(row) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除! ')
      }
      const { data } = await deleteSubjectsById(row)
      // console.log(data)
      this.$message.success('删除成功! ')
      this.loadSubjectsList()
    },
    clearForm() {
      this.queryInfo.subjectName = ''
      this.loadSubjectsList()
    },

    // 监听pagesize改变事件
    onPageSizeChange(pageSize) {
      this.queryInfo.pagesize = pageSize
      this.loadSubjectsList()
    },
    // 监听 页码值 改变事件
    onPageChange(pageNum) {
      this.queryInfo.page = pageNum
      this.loadSubjectsList()
    }
  }
}
</script>

<style scoped lang="less">
.subjects-container {
  .addSubjectBtn {
    position: absolute;
    right: 0;
    top: 0;
  }
  .subjectCard {
    margin-top: 15px;
    font-size: 12px;

    .el-input--medium {
      width: 300px;
      height: 32px;
      margin-left: 5px;
      margin-right: 10px;
      display: inline-block;
    }
  }
}
</style>
